<template>
  <el-container class="setting_print-setting_receipt-layout-setting">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <el-tabs v-model="tabsName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="0">
            <TenementBaseInfo :key="isShow0" />
          </el-tab-pane>
          <el-tab-pane label="扩展信息" name="1">
            <TenementExtendInfo :key="isShow1" />
          </el-tab-pane>
          <el-tab-pane label="详细信息" name="2">
            <TenementDetailInfo :key="isShow2" />
          </el-tab-pane>
          <el-tab-pane label="联系信息" name="3">
            <TenementContactInfo :key="isShow3" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>
<script>
import TenementBaseInfo from './components/tenementBaseInfo'
import TenementExtendInfo from './components/tenementExtendInfo'
import TenementDetailInfo from './components/tenementDetailInfo'
import TenementContactInfo from './components/tenementContactInfo'

export default {
  components: {
    TenementBaseInfo,
    TenementExtendInfo,
    TenementDetailInfo,
    TenementContactInfo
  },
  data() {
    return {
      isShow0: 0,
      isShow1: 0,
      isShow2: 0,
      isShow3: 0,
      tabsName: 0
    }
  },
  mounted() {
  },
  methods: {
    handleClick() {
      if (this.tabsName === '0') {
        this.isShow0++
      } else if (this.tabsName === '1') {
        this.isShow1++
      } else if (this.tabsName === '2') {
        this.isShow2++
      } else if (this.tabsName === '3') {
        this.isShow3++
      }
    }
  }
}
</script>

<style lang="scss">
.setting_print-setting_receipt-layout-setting {
  .receipt-layout-setting-list {
    display: flex;
    align-items: left;
    width: calc(100%);
    overflow-x: hidden;
    margin-bottom: 1px;
    border: 1px solid #dddce2;
    > div {
      margin-right: 5px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      padding: 15px 0 5px;
      width: 100%;
      justify-content: left;
      align-items: left;
      height: 100px;
      .item-name {
        font-size: 18px;
        margin-bottom: 3px;
      }
      .example {
        font-size: 12px;
        margin-bottom: 3px;
      }
      .desc {
        font-size: 12px;
        margin-bottom: 4px;
      }
    }
  }
}
</style>
